import React, { useState } from 'react';
import {
  Input,
  Select,
  DatePicker,
  Button,
  Table,
  Space,
  Tag,
  Popconfirm,
  Form,
  Pagination,
} from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
  FileTextOutlined,
} from '@ant-design/icons';
import PublicModal from '../../component/publicModal/PublicModal';

const { RangePicker } = DatePicker;
const { Option } = Select;




const Rukugl = () => {
  // 查询的参数
  const [searchParams, setSearchParams] = useState({
    entryNumber: '',
    status: '',
    type: '',
    customerName: '',
    totalItems: '',
    enteredQuantity: '',
  });

  // 表单显示
  const [visibity, setVisibity] = useState(false);
  // 表单标题
  const [title, setTitle] = useState('新增出库单');

  // 表单回显数据
  const [formParams, setFormParams] = useState({
    key: '',
    entryNumber: '',
    status: '',
    type: '',
    details: '',
    customerName: '',
    totalItems: null,
    enteredQuantity: null,
    remarks: '',
    orderDate: '',
    entryTime: '',
    entryPerson: '',
  });

  // 表单配置项
  const formItems = []

  // 获取查询的表单
  const [searchForm] = Form.useForm()
  // 点击查询按钮执行
  const handleInSearch = () => {
    console.log('查询');
  }

  const dataSource = [
    {
      key: '1',
      entryNumber: 'R20200629001',
      status: '初始录入',
      type: '普通入库',
      details: '',
      customerName: '客户一',
      totalItems: 50,
      enteredQuantity: 20,
      remarks: '',
      orderDate: '2017-07-19 14:48:38',
      entryTime: '',
      entryPerson: '',
    },
    {
      key: '2',
      entryNumber: '201707196398345',
      status: '初始录入',
      type: '退货入库',
      details: '',
      customerName: '客户一',
      totalItems: '',
      enteredQuantity: '',
      remarks: '',
      orderDate: '',
      entryTime: '',
      entryPerson: '',
    },
    {
      key: '3',
      entryNumber: '201707196398345',
      status: '入库完成',
      type: '普通入库',
      details: '',
      customerName: '客户一',
      totalItems: '',
      enteredQuantity: '',
      remarks: '',
      orderDate: '',
      entryTime: '',
      entryPerson: '',
    },
    {
      key: '4',
      entryNumber: '201707196398345',
      status: '入库完成',
      type: '普通入库',
      details: '',
      customerName: '客户一',
      totalItems: '',
      enteredQuantity: '',
      remarks: '',
      orderDate: '',
      entryTime: '',
      entryPerson: '',
    },
    {
      key: '5',
      entryNumber: '201707196398345',
      status: '入库完成',
      type: '普通入库',
      details: '',
      customerName: '客户一',
      totalItems: '',
      enteredQuantity: '',
      remarks: '',
      orderDate: '',
      entryTime: '',
      entryPerson: '',
    },
  ];

  const columns = [
    {
      title: '',
      dataIndex: 'check',
      render: () => <Input type="checkbox" />,
    },
    {
      title: '入库编号',
      dataIndex: 'entryNumber',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (status) => (
        <Tag color={status === '初始录入' ? 'blue' : 'cyan'}>{status}</Tag>
      ),
    },
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: '明细',
      dataIndex: 'details',
      render: (_, record) =>
        record.status === '初始录入' ? (
          <Space>
            <FileTextOutlined />
            <PlusOutlined style={{ backgroundColor: '#000', color: '#fff', borderRadius: '50%', padding: '4px' }} />
          </Space>
        ) : (
          <FileTextOutlined />
        ),
    },
    {
      title: '客户名称',
      dataIndex: 'customerName',
    },
    {
      title: '订单总件数',
      dataIndex: 'totalItems',
    },
    {
      title: '已入数量',
      dataIndex: 'enteredQuantity',
    },
    {
      title: '备注',
      dataIndex: 'remarks',
    },
    {
      title: '订单日期',
      dataIndex: 'orderDate',
    },
    {
      title: '入库时间',
      dataIndex: 'entryTime',
    },
    {
      title: '入库人',
      dataIndex: 'entryPerson',
    },
    {
      title: '操作',
      render: (_, item) => {
        return (
          <Space>
            <Button onClick={() => {
              setVisibity(true)
              setTitle('编辑入库单')
              setFormParams(item)
            }}>编辑</Button>
            <Popconfirm title="确定删除吗？" okText="确定" cancelText="取消">
              <Button>删除</Button>
            </Popconfirm>
          </Space>
        )
      }
    }
  ];
  return (
    <div style={{ padding: '20px' }}>
      <Form
        form={searchForm}
        onFinish={handleInSearch}
        layout="inline"
        style={{
          marginBottom: '20px'
        }}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: '100%'
          }}
        >
          <Space>
            <Form.Item
              name="outboundNumber"
              rules={[{ whitespace: true }]} // 允许空值，但不允许纯空格
            >
              <Input
                placeholder="请输入入库单号"
                prefix={<SearchOutlined />}
                style={{ width: 150 }}
              />
            </Form.Item>

            <Form.Item name="outboundType">
              <Select placeholder="请选择入库类型" style={{ width: 150 }}>
                <Option value="normal">普通入库</Option>
                <Option value="return">退货入库</Option>
              </Select>
            </Form.Item>

            <Form.Item name="customerName">
              <Input
                placeholder="请输入客户名称"
                prefix={<SearchOutlined />}
                style={{ width: 150 }}
              />
            </Form.Item>


          </Space>

          <Space>
            <span>入库时间:</span>
            <Form.Item name="outboundTime">
              <RangePicker style={{ marginRight: 10 }} />
            </Form.Item>
          </Space>
        </div>
        <div style={{ width: '100%', textAlign: 'end', marginTop: '20px', marginRight: '25px' }}>
          <Space>
            <Button type="primary" htmlType='submit'>搜索</Button>
            <Button htmlType='reset'>重置</Button>
          </Space>
        </div>

        <Space style={{ marginBottom: '20px', marginTop: '20px' }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={() => {
            setVisibity(true)
            setTitle('新增入库单')
            setFormParams({
              key: '',
              entryNumber: '',
              status: '',
              type: '',
              details: '',
              customerName: '',
              totalItems: null,
              enteredQuantity: null,
              remarks: '',
              orderDate: '',
              entryTime: '',
              entryPerson: '',
            })
          }}>
            添加入库
          </Button>
        </Space>
      </Form>
      <Table dataSource={dataSource} columns={columns} pagination={false} />

      {/* 分页区域 */}
      <div style={{ marginTop: '20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Pagination
          defaultCurrent={1}
          total={12} // 总数据量，示例中是12条
          pageSize={10} // 每页条数

        />
        <Space>
          <span>10条/页</span>
          <span>跳至</span>
          <Input type="text" defaultValue="5" style={{ width: 50, textAlign: 'center' }} />
          <span>页</span>
        </Space>
      </div>
      <PublicModal formParams={formParams} formItems={formItems} visibity={visibity} setVisibity={setVisibity} title={title} />
    </div>
  );
};

export default Rukugl;
